<template>
	<section class="ruleManage">
		<el-row>
			<el-col :span="8" >
				<h4>角色列表</h4>
				<el-row class="header">
					<el-col :span="24">
							 <el-form :inline="true" :model="search"  class="searchForm" label-width="70px" label-position="left">
                                <el-form-item label="角色代码">
                                    <el-input  placeholder="请输入要搜索的角色代码" size="small" v-model='search.roleCode'></el-input>
                                </el-form-item>
                                <el-form-item label="角色名称">
                                    <el-input v-model="search.keyword" placeholder="请输入角色名称关键字" size="small" icon="search"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="small" icon="search" @click.native="handleIconClick()">查询</el-button>
                                </el-form-item>
                            </el-form>
					</el-col>
				</el-row>
				<el-table :data="table.tableData" v-loading="table.tableLoading" border highlight-current-row style="width: 100%" @current-change="handleRoleRowChange">
		
					<el-table-column prop="roleCode" label="代码" width="180">
					</el-table-column>
					<el-table-column prop="roleName" label="名称" width="180">
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeRoleChange" @current-change="handleCurrentRoleChange" :current-page.sync="table.page" :page-sizes="[10, 20, 30, 40]" :page-size="table.rows" layout="sizes, prev, pager, next" :total="table.total">
				</el-pagination>
			</el-col>
			<el-col :span="16">
				<h4>角色规则</h4>
				<el-row class="header">
					<el-col :span="24">
						<el-button type="primary" icon="plus" size="small" @click="addRule()">新增</el-button>
						<el-button type="danger" icon="edit" size="small" @click="delRoleDataRule()">删除</el-button>
					</el-col>
				</el-row>
				<el-table :data="roleRuletable.tableData" v-loading="roleRuletable.tableLoading" border highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="40">
                    </el-table-column>
					<el-table-column prop="ruleCode" label="规则代码" width="180">
					</el-table-column>
					<el-table-column prop="ruleName" label="规则名称" width="180">
					</el-table-column>
					<el-table-column prop="moduleName" label="模块名称" width="180">
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeRoleRuleChange" @current-change="handleCurrentRoleRuleChange" :current-page.sync="roleRuletable.page" :page-sizes="[10, 20, 30, 40]" :page-size="roleRuletable.rows" layout="sizes, prev, pager, next" :total="roleRuletable.total">
				</el-pagination>
			</el-col>
			
		</el-row>
		<el-dialog title="数据规则" v-model="ruleShow">
				<div>
					<el-button type="primary" size="small" icon="edit" @click="saveRoleDataRule()">选择</el-button>
					<el-button type="primary" size="small" style="margin-left: 10px;" icon="search" @click="handleSerch()">查询</el-button>
				</div>
				<el-table :data="roleRuleNotable.tableData" v-loading="roleRuleNotable.tableLoading" border highlight-current-row style="width: 100%" @current-change="handleRoleRuleNoRowChange">
					<el-table-column type="selection" width="40">
                    </el-table-column>
					<el-table-column prop="ruleCode" label="规则代码" width="180">
					</el-table-column>
					<el-table-column prop="ruleName" label="规则名称" width="180">
					</el-table-column>
					<el-table-column prop="moduleName" label="模块名称" width="180">
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeRoleRuleNoChange" @current-change="handleCurrentRoleRuleNoChange" :current-page.sync="roleRuleNotable.page" :page-sizes="[10, 20, 30, 40]" :page-size="roleRuleNotable.rows" layout="sizes, prev, pager, next" :total="roleRuleNotable.total">
				</el-pagination>	
		</el-dialog>
	</section>
</template>
<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>
<script>
	import { roleMaList} from '../../api/system';
	import { getDataRuleList,saveRoleDataRule,getRoleRuleList,delRoleDataRule} from '../../api/auth';
	export default {
		data() {
			return {
				search: {
					roleCode: '',
					keyword:''
				},
				roleCode: '',
				ruleShow:false,
				roleRuleId:'',
				roleRuleList:[],
				ids: [],
				multipleSelectionNo:[],
				leftDefaultChecked:[4],
				table:{
  					tableLoading:false,
  					tableData:[],
  					page:1,
  					rows:20,
  					total:0,
  					currentRow:null
	  			},
	  			roleRuletable:{
	  					tableLoading:false,
	  					tableData:[],
	  					page:1,
	  					rows:10,
	  					total:0,
	  					currentRow:null
	  			},
	  			roleRuleNotable:{
	  					tableLoading:false,
	  					tableData:[],
	  					page:1,
	  					rows:10,
	  					total:0,
	  					currentRow:null
	  			}
			}
		},
		methods: {
			addRule() {
				this.getRoleRuleNoList();
	          this.ruleShow=true;
	       },
			 handleChange(value, direction, movedKeys) {
		        console.log(value, direction, movedKeys);
		  },
			getRoleRuleList() {
				var para = {
					roleCode:this.roleCode,
					hasRule:'1',
					page:this.roleRuletable.page,
					rows:this.roleRuletable.rows
				};
				
				getRoleRuleList(para).then((res) => {
					this.roleRuletable.tableData = res.obj;
					this.roleRuletable.total=res.total;
          			this.roleRuletable.tableLoading=false;
				});
			},
			getRoleRuleNoList() {
				var para = {
					roleCode:this.roleCode,
					hasRule:'0',
					page:this.roleRuleNotable.page,
					rows:this.roleRuleNotable.rows
				};
				
				getRoleRuleList(para).then((res) => {
					this.roleRuleNotable.tableData = res.obj;
					this.roleRuleNotable.total=res.total;
          			this.roleRuleNotable.tableLoading=false;
				});
			},
		getRoleList() {
			this.table.tableLoading=true;
			let para={'page':this.table.page,'rows':this.table.rows};
			para.field='id,roleCode,roleName,';
			this.table.tableData=[];
			roleMaList(para).then((res)=>{
				this.table.total=res.total;
				this.table.tableData=res.rows;
      			this.table.tableLoading=false;
          	});
		},
		//查找角色
		handleIconClick(){
			this.table.tableLoading=true;
			let para={page:this.table.page,rows:this.table.rows};
			para.roleName=this.search.keyword;
			para.roleCode=this.search.roleCode;
			para.field='id,roleCode,roleName,';
			this.table.tableData=[];
			roleMaList(para).then((res)=>{
				this.table.total=res.total;
				this.table.tableData=res.rows;
        		this.table.tableLoading=false;
          	});
		},
		//角色页码改变回调
		handleCurrentRoleChange(page) {
			this.table.page = page;
			if(this.roleName==null){
            		this.getRoleList();
	        }else{
	            this.handleIconClick();
	        }
		},
		//角色条数改变回调
		handleSizeRoleChange(size) {
			this.table.rows = size;
			if(this.roleName==null){
            		this.getRoleList();
	        }else{
	            this.handleIconClick();
	        }
		},
		handleRoleRowChange(val) {
			if(val){
				this.roleCode = val.roleCode;
				this.getRoleRuleList();
			}
			
		},
		//角色规则页码改变回调
		handleCurrentRoleRuleChange(page) {
			this.roleRuletable.page = page;
			this.getRoleRuleList();
		},
		//角色规则条数改变回调
		handleSizeRoleRuleChange(size) {
			this.roleRuletable.rows = size;
			this.getRoleRuleList();
		},
		handleSelectionChange(val) {
			if(val){
			    //this.ids.push(val.id);
			    this.ids = val;
				//this.getRoleRuleList();
			}
			
		},
		//角色规则页码改变回调(不在)
		handleCurrentRoleRuleNoChange(page) {
			this.roleRuleNotable.page = page;
			this.getRoleRuleNoList();
		},
		//角色规则条数改变回调(不在)
		handleSizeRoleRuleNoChange(size) {
			this.roleRuleNotable.rows = size;
			this.getRoleRuleNoList();
		},
		handleRoleRuleNoRowChange(val) {
			if(val){
			    this.multipleSelectionNo.push(val);
				//this.getRoleRuleList();
			}
			
		},

		//删除规则
		delRoleDataRule() {
			this.$confirm('此操作将删除选中的规则, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let str='';
				debugger;
				for(let i=0;i<this.ids.length;i++){
					str+=',';
  					str+=this.ids[i].id;
  				}
				if(str.startsWith(","))
				str=str.substr(1);
				let para = {
					'ids': str
				};
				delRoleDataRule(para).then((res) => {
					if(res.success == true) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.getRoleRuleList();
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			});
		},
		//提交
		saveRoleDataRule() {
				//let para =this.roleRuletable.tableData;
				if(this.roleCode=='')
				alert("请选择角色!");
				var str='';
				for(let i=0;i<this.multipleSelectionNo.length;i++){
					str+=',';
  					str+=this.multipleSelectionNo[i].ruleCode;	
  				}
				if(str.startsWith(","))
				str=str.substr(1);
				let para={'ids':str,'roleCode':this.roleCode};
				saveRoleDataRule(para).then((res) => {
					if(res.success == true) {
						this.$message({
							type: 'success',
							message: '保存成功'
						});
						this.getRoleRuleList();
						this.ruleShow=false;
						
					}
				});
		},

	},
	computed: {
			roleCode: function() {
				if(this.roleList.currentRow) {
					return this.roleList.currentRow.roleCode;
				}
			}
		},
		mounted() {
			this.getRoleList();
			//this.getMenuTree('8afc99b04c26ad0b014c26af28900042');//默认获取管理员的权限设置
		}
	}
</script>
